/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS THEME CUSTOM STYLES
----------------------------------------
!! Copy this file to your project's
   sass root. Don't edit the version
   in node_modules.
----------------------------------------
Custom project SASS goes here.

i.e.
@include u-padding-right('05');
----------------------------------------
*/

p,
h1, h2, h3, h4, h6, h6 {
  margin: 0;
  padding: 0;
}

.link-heavy,
.link-light {
  @include u-text('ink', 'no-underline');
  color: color('ink');
  display: inline-block;

  .is-home & {
    color: color('white');
  }
}

.link-heavy {
  border-bottom: units('2px') solid color('primary-vivid');

  &:hover,
  &:active {
    color: color('primary-vivid');
  }
}

.link-light {
  border-bottom: units(2px) solid color('secondary-vivid');

  &:hover,
  &:active {
    color: color('secondary-vivid');
  }
}

nav {
  margin-top: units(2);

  ul {
    @include add-list-reset;
    @include u-margin-x(-0.5);
  }

  li {
    display: inline-block;
    width: units(5);

    @include at-media('tablet') {
      width: auto;
    }
  }

  a {
    @include u-text('ink', 'no-underline');
    @include u-margin-x(0.5);
    border-bottom: units(2px) solid color('transparent');
    display: inline-block;
    padding-top: units(1);

    &:hover,
    &:active {
      color: color('ink');
      border-bottom-color: color('ink');
    }

    .is-home & {
      color: color('white');

      &:hover,
      &:active {
        color: color('white');
        border-bottom-color: color('primary-vivid');
      }
    }
  }
}

.site-title {
  @include u-text('bold', 'ink', 'no-underline');

  a {
    @include u-text('bold', 'ink', 'no-underline');

    &:hover,
    &:active {
      color: color('primary-vivid');
    }
  }

  .is-home & {
    color: color('white');
  }
}

.huge {
  font-size: 35vw;
  letter-spacing: ls(-1);
  line-height: lh('sans', 1);
  overflow: hidden;
  padding: 0;

  @include at-media('tablet-lg') {
    font-size: 18rem;
  }
}

.ani-opacity {
  transition: opacity .75s;
}

._switchOnHoverShow,
._switchOnHoverHide {
  transition: opacity 0.75s .05s;
  display: block;
  opacity: 1;
}

._switchOnHover {
  position: relative;

  ._switchOnHoverShow  {
    @include u-pin('all');
    opacity: 0;
    position: absolute;
  }

  &:hover {
    ._switchOnHoverShow {
      opacity: 1;
    }

    ._switchOnHoverHide {
      opacity: 0;
    }
  }
}

.token {
  @include u-font('mono', 1);
  @include u-padding-x(0.5);
  @include u-padding-y(0.5);
  @include u-text('ink', 'no-underline');
  background-color: color('base-lightest');
  border-radius: units(2px);
  display: inline-block;

  &:hover,
  &:active {
    background-color: color('primary-vivid');
    color: color('white');
  }

  .site-section-dark & {
    background-color: color('base-darker');
    color: color('base-lighter');

    &:hover,
    &:active {
      background-color: color('primary-vivid');
      color: color('white');
    }
  }
}

.site-comparison {
  font-size: fs('sans', 12);
}

.site-font-system {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

.site-font-verdana {
  font-family: Verdana, sans-serif;
}

.site-font-georgia {
  font-family: ff('serif');
}

h2 {
  font-weight: fw('light');
}
